「原來如此!好像很厲害!!」聽完我的介紹後,Wayne 一副饒有興致的樣子。
「對呀!想不想學阿?!我教你!」看到 Wayne 這麼有興趣,當然就是要趁勢推他入坑啦,嘿嘿。
「好阿!那我們要從哪裡開始?」Wayne 邊說邊從他的背包裡拿出他的電腦。
「那就先從環境架設開始吧!我跟你說...」
以前的前端套件大多數是函式庫的形式,每次引用的時候都是將事先到官網下載好的檔案引入,或是直接引入線上的連結。像是:
<!-- 線上連結 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- 檔案 -->
<script src="assets/js/lib/jquery.min.js"></script>
而在 Node.js 與其套件管理系統 NPM (Node Package Manager) 的蓬勃發展下,現今的前端框架已大多是基於這套系統的架構上開發 (其他的套件本版管理系統如 yarn,但本系列文不會特別介紹) ,Angular 也不例外。所以首先要做的事就是先到官網下載並安裝 (本系列文分享的是最簡單的安裝方式) 。
到了官網之後會看到如上圖所示的兩顆按鈕。LTS 是大多數人都在使用的版本;Current 則是目前最新的版本。點擊 LTS 的按鈕下載,然後一直按「下一步」即可。
安裝完成之後要怎麼檢查是否已經確實安裝完成呢?開啟你的終端機或命命列提示工具(找不到或不知道的朋友再麻煩你自行 Google),輸入:
node -v
如果輸入完有印出類似下圖的版本資訊,就表示你的電腦已經將 Node.js 裝好囉! (其實安裝之前也可以先試著輸入看看,搞不好你的電腦已經安裝過了,只是你不知道而已) 。
裝完 Node.js 之後,接下來要裝的就是 NPM 了!等等,其實安裝 Node.js 的時候,其實也一併把 NPM 安裝好了 (Node.js 0.6.3 版之後就將 NPM 內建了) !要怎麼檢查是否已經確實安裝完成呢?跟 Node.js 的檢查方式類似,輸入:
npm -v
跟 Node.js 一樣,有看到類似下圖的版本資訊就表示你的電腦也已經將 NPM 裝好囉!
Angular CLI 是 Angular 的命令列工具。雖說是工具,但我個人覺得,如果 Angular 沒有了它,Angular 都不 Angular 了!
還記得我剛剛開始接觸 AngularJS 以及相關環境建置的套件如 Webpack、Gulp、Karma、Protractor 的時候,光是將這些東西組裝起來,令其能夠在我改了程式碼之後自動刷新頁面、下了指令可以幫我將程式碼打包起來等等這些事情,就讓我足足花了一個禮拜的時間才完成! (對不起我太遜了,嗚嗚!) 那時我心裡還想說:哇靠!前端怎麼變得這麼難?!這下腫了。直到我遇見了 Angular CLI 才知道,原來這一切其實可以這麼簡單!
事不宜遲,讓我們趕快來安裝 Angular CLI 吧!!安裝的方式非常簡單,在終端機中輸入以下指令:
npm install -g @angular/cli
等它跑完就安裝完成囉!!想要檢查是否有確實安裝完成的話,一樣在終端機中輸入:
ng -v
如果終端機有印出類似下圖的版本資訊,那代表 Angular CLI 也已經安裝完成囉!我們可以開始建立我們第一個 Angular 專案了!!
如果讀者輸入
ng -v
沒有看到類似上圖的版本資訊的話,請改為輸入ng version
或是ng v
,ng -v
這個指令已在某個版本移除了(貌似是 Angular 7)
在開始建立前,建議先將你終端機的當前目錄移動到你想要的位置之後,再輸入以下指令:
ng new HelloAngular
輸入完之後,一樣讓子彈飛一陣子,等它跑完之後,先輸入以下指令進入我們剛剛新建的專案目錄裡:
cd HelloAngular
接著再輸入:
ng serve
一樣等它跑完之後,打開瀏覽器並在網址列輸入 localhost:4200
後,應該會看到類似下圖的畫面。
當你看到這個畫面時,恭喜!!你就成功安裝完環境並建立了第一個 Angular 專案!!有沒有一種「我根本沒有做什麼事阿?!從安裝 Node.js 開始,我只打了七行指令而已耶?!」的感覺?!
沒錯!!這就是 Anuglar 想要讓你知道的事,環境與專案的建置就是這麼簡單!!當我建立完我第一個 Angular 專案的時候,我只有一個念頭:
「我之前花的那一個禮拜究竟是為了什麼?!」
專案建立好了,接下來要開始 Coding 了!!我好興奮阿!!!!!
等一下!Coding 前沒有趁手的編輯器怎麼行呢?雖然很多人都已經有在用像是 Notepad++ 、 Sublime、Atom 等等之類的純文字編輯器,但我還是要推一下微軟推出的這套編輯器:VSCdoe (Visual Studio Code) 。至於我為什麼推薦用 VSCode 呢?其實很多人都有寫過推坑的文章如:
所以在此我就不再贅述,趕快下載來用就對了!!
安裝完 VSCode 之後,一定要去下載一個叫做 Angular Extension Pack 的擴充套件。這個擴充套件是 Will 保哥將很多好用的 Angular 相關擴充套件都整合進一個擴充套件裡,只要安裝一個套件就能連帶安裝好其他相關套件,方便又好用!!
最後要安裝的工具叫做 Augury 。
我在上一篇文章有提到過,Augury 是 Angular 官方出版的開發者工具,透過 Chrome 或是 Firefox 的擴充功能來安裝。這套工具可以幫我們分析頁面中所用元件的狀態與方法。
安裝方式也很簡單,以 Chrome 來說,只要到線上應用程式商店之後,選擇擴充功能,在搜尋的文字框中輸入 Augury,即可找到並安裝。
安裝完之後,就可以在瀏覽器的開發者工具裡看到 Augury 的標籤,並且透過 Augury 看到應用程式目前的狀態:
如果有看到類似上圖的畫面,就表示 Augury 已經確實安裝完成囉!
因從 Angular 9 之後在
ng serve
時,ivy
預設開啟的關係,基本上 Augury 已經不適用,最近 Angular 官方有出了新的且更好用的 extension - Angular DevTools ,推薦大家使用這個唷
SuperMike
的提醒,增加 Angular Cli 指令的補充說明。您好!開始拜讀您的推文,並跟著做!到此篇時發現:
ng new HelloAngular
後還有個選擇
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
> CSS
SCSS [ http://sass-lang.com ]
SASS [ http://sass-lang.com ]
LESS [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
不知道選哪一個好?我只好選 CSS ,因為沒學過其他的。。。
跑一堆畫面後出現如下:
'git' 不是內部或外部命令、可執行的程式或批次檔。
我還要安裝 git 嗎?
Hi Jimmy,
後還有個選擇
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
CSS
SCSS [ http://sass-lang.com ]
SASS [ http://sass-lang.com ]
LESS [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
不知道選哪一個好?我只好選 CSS ,因為沒學過其他的。。。
是選 CSS 沒錯噢!如果你會其他工具再選其他的即可。
值得一提的是,這個選擇介面是 Angular CLI 7 才提供的功能,免緊張~~
'git' 不是內部或外部命令、可執行的程式或批次檔。
我還要安裝 git 嗎?
由於 Angular CLI 預設會建立含有 git
的專案,如果你的電腦沒有安裝或者是不需要的話,建立新專案的時候可以加上 --skip-git
的參數來讓 CLI 不要將此專案加入版控。例如:ng new SampleProject --skip-git
。
這個部分剛好在第四天的文章內有提到,詳情可以再參考一下第四天的文章介紹。
以上,如果還有任何的問題,歡迎留言跟我說噢! :)
拜讀文章並實作中,補充一下,Angular CLI 7 查詢版本已經要改成 ng version
囉!
Hi SuperMike,
非常感謝您的補充!已增加補充說明囉!^^
您好,最近在拜讀您的文章並嘗試實作,但發現augury的連結無法下載,呈現error 404的狀況,上網爬文後也未找到載點,想請問是否有其他解決方式呢?不好意思麻煩您了。
Hi Kevin_Chou,
Augury 在 Angular 9 之後的版本就會沒有用(因為 ng serve
時, ivy
預設是開啟的,最近有出了新的 extension - Angular DevTools 之後都推薦使用這個唷!
好的了解!謝謝您
您好,我最近新使用firefox瀏覽器,因為不太確定該用什麼擴充套件因此暫時加這個:
Angular state inspector
https://addons.mozilla.org/zh-TW/firefox/addon/angular-state-inspector/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
,如果有問題再上來回報~